<template>
  <div class="channel">
    <div class="top-filter flex-between mb24">
      <div class="strong fs16 mrSemiBold flex-center" style="color: #110000">
        <div class="outer">
          <div class="inner"></div>
        </div>
        请输入要查看轨迹的车辆信息
      </div>
    </div>
    <div class="filter">
      <el-select
        clearable
        size="mini"
        v-model="filterTop.transfer_person_id"
        placeholder="请选择"
      >
        <el-option
          v-for="item in userList"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        >
        </el-option>
      </el-select>
      
      <el-select
        clearable
        size="mini"
        v-model="filterTop.transfer_vehicle_id"
        placeholder="请选择"
      >
        <el-option
          v-for="item in vehicleList"
          :key="item"
          :label="item"
          :value="item"
        >
        </el-option>
      </el-select>

      <el-button size="mini" type="primary" @click="search"> 查询 </el-button>
    </div>

    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="username" label="转运人员" width="150">
      </el-table-column>
      <el-table-column prop="transfer_vehicle_id" label="车辆号码">
      </el-table-column>
      <el-table-column prop="start_time" label="出发时间"> </el-table-column>
      <el-table-column prop="end_time" label="到达时间"> </el-table-column>

      <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="openDetail(scope.row)" type="text" size="small"
            >查看轨迹</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <a-modal
      :title="modalTitle"
      width="1200px"
      :visible="addDialog"
      @ok="handleOkAdd"
      @cancel="addDialog = false"
    >
      <div class="flex-center" style="gap: 10px">
        <div>司机：{{ filter.username }}</div>
        <div>车牌号：{{ filter.transfer_vehicle_id }}</div>
        <div>出发时间：{{ filter.start_time }}</div>
      </div>

      <div class="map">
        <div id="container2"></div>
        <div class="input-card">
          <h4>轨迹回放控制</h4>
          <div class="input-item">
            <input
              type="button"
              class="btn"
              value="开始动画"
              id="start"
              @click="startAnimation()"
            />
            <input
              type="button"
              class="btn"
              value="暂停动画"
              id="pause"
              @click="pauseAnimation()"
            />
          </div>
          <div class="input-item">
            <input
              type="button"
              class="btn"
              value="继续动画"
              id="resume"
              @click="resumeAnimation()"
            />
            <input
              type="button"
              class="btn"
              value="变速动画"
              id="stop"
              @click="changeSpeed()"
            />
          </div>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script>
import { getTransport, getAllStaffPost } from "../../../service";
import moment from "moment";
import AMapLoader from "@amap/amap-jsapi-loader";
export default {
  name: "Channel",
  data() {
    return {
      filterTop: {
        transfer_person_id: "",
        transfer_vehicle_id: "",
      },
      filter: {},
      addDialog: false,
      modalTitle: "",
      isPlay: false,
      routeGeoJson: {},
      realRouteGeoJson: {},
      animatePointGeoJson: {},
      newRouteGeoJson: {},
      speed: 1,
      map: {},
      marker: {},
      lineArr: [],
      userList: [],
      tableData: [],
      vehicleList: []
    };
  },
  created() {
    getAllStaffPost({
      page: 1,
      pageSize: 1000,
    }).then((res) => {
      this.userList = res.data.data.filter((v) => v.role === "转运人员");
      this.search('init');
    });
  },
  methods: {
    startAnimation() {
      this.marker.moveAlong(this.lineArr, 120, (e) => {
        return e * this.speed > 1 ? 1 : e * this.speed;
      });
    },
    pauseAnimation() {
      this.marker.pauseMove();
    },
    resumeAnimation() {
      this.marker.resumeMove();
    },
    changeSpeed() {
      this.marker.pauseMove();
      this.speed = this.speed === 4 ? 2 : 4;
      this.marker.resumeMove();
    },
    search(init = false) {
      getTransport(this.filterTop).then((res) => {
        for (let item of res.data.data) {
          if (this.userList.find((v) => v.id == item.transfer_person_id)) {
            item.username = this.userList.find(
              (v) => v.id == item.transfer_person_id
            ).name;
          }
          item.start_time = moment(item.start_time).format(
            "YYYY-MM-DD HH:mm:ss"
          );
          item.end_time = moment(item.end_time).format("YYYY-MM-DD HH:mm:ss");
        }
        this.tableData = res.data.data;
        if (init) {
          this.vehicleList = this.tableData.map(v => v.transfer_vehicle_id)
          this.vehicleList = Array.from(new Set(this.vehicleList))
        }
      });
    },
    handleOkAdd() {
      this.addDialog = false;
    },
    openDetail(rs) {
      this.addDialog = true;
      this.modalTitle = "轨迹";
      this.filter = rs;
      this.lineArr = JSON.parse(rs.track_points);
      this.lineArr = [[118.715756,30.908008], [118.721485,30.906627], [118.733458,30.917673], [118.74431,30.915625]]
      const center = this.lineArr.slice(Math.floor(this.lineArr.legnth / 2), 1);
      this.$nextTick(() => {
        setTimeout(() => {
          AMapLoader.load({
            key: "33f9bb8c080e641a62d3453a34ee9376", // 申请好的Web端开发者Key，首次调用 load 时必填
          }).then((AMap) => {
            this.map = new AMap.Map("container2", {
              center: center[0],
              zoom: 15,
            });

            this.marker = new AMap.Marker({
              map: this.map,
              position: this.lineArr[0],
              icon: "https://webapi.amap.com/images/car.png",
              offset: new AMap.Pixel(-26, -13),
              autoRotation: true,
              angle: -90,
            });

            // 小汽车还未走的路
            var polyline = new AMap.Polyline({
              map: this.map,
              path: this.lineArr,
              showDir: true,
              strokeColor: "#28F", //线颜色
              strokeWeight: 6, //线宽
            });
            // 小汽车已经走过的路线
            var passedPolyline = new AMap.Polyline({
              map: this.map,
              strokeColor: "#AF5", //线颜色
              strokeWeight: 6, //线宽
            });
            //监听小车移动事件
            this.marker.on("moving", function (e) {
              passedPolyline.setPath(e.passedPath);
            });
            // 可以加个这个方法  这个让屏幕 聚焦在小汽车
            this.map.setFitView();
          });
        }, 100);
      });
    },
  },
};
</script>

<style lang="less" scoped>
.channel {
  width: 100%;
  height: 80vh;
  background: #fff;
  border-radius: 10px;
  padding: 20px;
  margin-top: 20px;
}
.filter {
  display: flex;
  gap: 20px;
  width: 100%;
}

.input-card .btn {
  margin-right: 1.2rem;
  width: 6rem;
}

.input-card .btn:last-child {
  margin-right: 0;
}

.input-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border-radius: 0.25rem;
  width: 16rem;
  border-width: 0;
  border-radius: 0.4rem;
  box-shadow: 0 2px 6px 0 rgba(114, 124, 245, 0.5);
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 0.75rem 1.25rem;
}
.btn {
  display: inline-block;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border: 1px solid transparent;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  background-color: transparent;
  background-image: none;
  color: #25a5f7;
  border-color: #25a5f7;
  padding: 0.25rem 0.5rem;
  line-height: 1.5;
  border-radius: 1rem;
  -webkit-appearance: button;
  cursor: pointer;
  margin-bottom: 10px;
}
</style>
